﻿<html>  
<head>  
<title></title>  
<script language="javascript" type="text/javascript">
    function showpos() {
        document.all.x.value = event.clientX;
        document.all.y.value = event.clientY;
    }
    function Point() {
        this.x, this.y;
        this.eventpos = function () {
            this.x = event.clientX;
            this.y = event.clientY;
        }
        this.setpos = function (pt) {
            this.x = pt.x;
            this.y = pt.y;
        }

    }
    var ptPre = new Point();
    var ptCur = new Point();

    function move(ptTo, ptFrom) {
        ox = ptTo.x - ptFrom.x;
        oy = ptTo.y - ptFrom.y;
        event.srcElement.style.posLeft += ox;
        event.srcElement.style.posTop += oy;
    }  
</script>   
  
<style type="text/css">  
.dr  
{  
position : relative ;  
cursor : hand ;  
event:expression(  
ondragstart=function()  
{  
ptCur.eventpos();  
ptPre.eventpos();  
},  
ondrag=function(){  
    ptCur.eventpos();  
     move(ptCur,ptPre);  
    ptPre.setpos(ptCur);  
}  
)  
}  
</style>
</head>  
<body  onmousemove="showpos()" >  
<form>  
<div class="dr">X:<input  name="x" id="x" type="text"></input></div>  
<div class="dr">Y:<input name="y" id="y" type="text"></input></div>  
</form>  
<img class="dr" src="free_register.gif" mce_src="free_register.gif" />  
<br/>  
<div class="dr">Select me,and drag</div>  
</body>  
</html>  